<template>
  <div class="app-container">
    <el-card>
      <!--查询表单-->
      <el-form
        ref="seachQuery"
        size="small"
        :model="queryParam"
        :inline="true"
        class="demo-form-inline"
      >
        <el-form-item label="课程类别">
          <el-select
            v-model="queryParam.subjectParentId"
            placeholder="请选择"
            filterable
            clearable
            @clear="emptySubjectId"
            @change="subjectLevelOneChanged"
          >
            <el-option
              v-for="subject in subjectList"
              :key="subject.id"
              :label="subject.title"
              :value="subject.id"
            />
          </el-select>

          <!-- 二级分类 -->
          <el-select
            v-model="queryParam.subjectId"
            placeholder="请选择"
            filterable
            clearable
          >
            <el-option
              v-for="subject in subjectLevelTwoList"
              :key="subject.id"
              :label="subject.title"
              :value="subject.id"
            />
          </el-select>
        </el-form-item>
        <!-- 标题 -->
        <el-form-item>
          <el-input
            v-model="queryParam.title"
            placeholder="课程标题"
            clearable
          />
        </el-form-item>
        <!-- 讲师 -->
        <el-form-item>
          <el-select
            v-model="queryParam.teacherId"
            placeholder="请选择讲师"
            filterable
            clearable
          >
            <el-option
              v-for="teacher in teacherList"
              :key="teacher.id"
              :label="teacher.name"
              :value="teacher.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="small"
            @click="onSubmit"
          >查询</el-button>
          <el-button
            type="default"
            icon="el-icon-delete"
            size="small"
            @click="resetForm('seachQuery')"
          >清空</el-button>
          <el-button
            type="danger"
            size="small"
            icon="el-icon-delete"
            @click="batchDelete"
          >删除</el-button>
        </el-form-item>
      </el-form>

      <!-- 表格 -->
      <el-table
        v-loading="loading"
        :data="dataSource"
        element-loading-text="数据加载中"
        border
        fit
        highlight-current-row
        @row-dblclick="(row, column, event) => handleInfo(row)"
        @selection-change="handleSelectChange"
        :height="tableHeight"
      >

        <el-table-column
          type="selection"
          width="50"
          align="center"
        ></el-table-column>

        <el-table-column
          label="序号"
          width="70"
          align="center"
          type="index"
          :index="indexMethod"
        />

        <el-table-column
          label="封面"
          align="center"
          width="200"
          :show-overflow-tooltip="true"
        >
          <template v-slot="scope">
            <img
              :src="scope.row.cover"
              alt="scope.row.title"
              width="100%"
            >
          </template>
        </el-table-column>

        <el-table-column
          label="课程信息"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <a
              style="color: #3CD3FA"
              href=""
            >{{scope.row.title}}</a>
            <p>
              分类：<span style="color: darkgoldenrod">{{ scope.row.subjectParentTitle }}</span> > <span style="color: #BF7FFC">{{ scope.row.subjectTitle }}</span>
            </p>
            <p>
              课时：<span style="color: #5DF3A0">{{ scope.row.lessonNum }}</span> /
              浏览：<span style="color: #ccc">{{ scope.row.viewCount }}</span> /
              付费学员：<span style="color: #E08AC6">{{ scope.row.buyCount }}</span>
            </p>
          </template>
        </el-table-column>

        <el-table-column
          prop="teacherName"
          label="讲师"
          width="100"
          align="center"
          :show-overflow-tooltip="true"
        />

        <el-table-column
          label="价格（元）"
          width="100"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template v-slot="scope">
            <el-tag
              type="success"
              v-if="Number(scope.row.price) === 0"
            >免费</el-tag>
            <!-- 前端解决保留两位小数的问题 -->
            <!-- <el-tag v-else>{{ Number(scope.row.price).toFixed(2) }}</el-tag> -->
            <!-- 后端解决保留两位小数的问题，前端不用处理 -->
            <el-tag v-else>{{ scope.row.price }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          prop="status"
          label="课程状态"
          width="100"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template v-slot="scope">
            <el-tag type="scope.row.status === 'Draft' ? 'warning' : 'success'">{{ scope.row.status === 'Draft' ? '未发布' : '已发布' }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          prop="gmtCreate"
          label="创建时间"
          align="center"
          :show-overflow-tooltip="true"
        />

        <el-table-column
          label="操作"
          prop="operator"
          width="300"
          align="center"
        >
          <template slot-scope="scope">
            <router-link :to="'/course/info/'+scope.row.id">
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-edit"
              >修改</el-button>
            </router-link>
            <router-link :to="'/course/chapter/'+scope.row.id">
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-edit"
              >编辑大纲</el-button>
            </router-link>
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="handleDelete(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页区域-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageParam.current"
        :page-sizes="pageParam.pageSizes"
        :page-size="pageParam.size"
        style="padding: 30px 0 0 0;"
        align="center"
        :layout="pageParam.layout"
        :total="pageParam.total"
      />

    </el-card>
  </div>
</template>
<script>
import { CourseApi } from '@/api/course/url-course'
import { TeacherApi } from '@/api/edu/url-teacher'
import { SubjectApi } from '@/api/subject/url-subject'
import { getAction } from '@/api/manage'
import { OneTableListMixins } from '@/mixins/OneTableListMixins'
export default {
  mixins: [OneTableListMixins],
  name: 'CourseList',
  data() {
    return {
      url: {
        list: CourseApi.list,
        delete: CourseApi.delete,
        batchDelete: CourseApi.batchDelete,
      },
      moduleName: '课程信息',
      // 讲师列表
      teacherList: [],
      // 一级分类列表
      subjectList: [],
      // 二级分类列表
      subjectLevelTwoList: [],
      queryParam: {
        subjectId: ''
      }
    }
  },
  created() {
    this.initSubjectList()
    this.initTeacherList()
  },
  methods: {
    // 初始化分类列表
    initSubjectList() {
      getAction(SubjectApi.list).then(res => {
        this.subjectList = res.data.items
      })
    },
    // 初始化讲师列表
    initTeacherList() {
      getAction(TeacherApi.listAll).then((res) => {
        this.teacherList = res.data.items
      })
    },
    // 改变一级课程目录时获取二级目录
    subjectLevelOneChanged(val) {
      this.subjectList.forEach(subject => {
        if (subject.id === val) {
          this.subjectLevelTwoList = subject.children
          this.queryParam.subjectId = ''
        }
      })
    },
    // 清空二级类别内容
    emptySubjectId() {
      this.queryParam.subjectId = ''
    }
  }
}
</script>
<style scoped>
.text {
  color: rgb(93, 243, 160);
}
</style>